<template>
  <div>
    <el-row :gutter="10">
    <el-col :span="24">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="需求标题">
          <el-input v-model="form.demandTitle"></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="form.demandInstructions"></el-input>
        </el-form-item>
        <el-form-item label="培训内容">
          <el-input v-model="form.describe"></el-input>
        </el-form-item>
        <el-form-item label="培训方式">
          <el-input v-model="form.trainingMethods"></el-input>
        </el-form-item>
        <el-form-item label="需求原因">
          <el-input v-model="form.demandReason"></el-input>
        </el-form-item>
          <div style="float: left" >
               选择需求发布的部门:<el-select v-model="form.demandDept" placeholder="请选择"> 
                <el-option
                v-for="item in detp"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
                >
                </el-option>
               </el-select>
            </div>      
        <el-form-item label="调研人数" style="margin-left:380px">
          <el-input
          v-model='peopleNumber'
          oninput="value=value.replace(/[^\d]/g,'')"
          maxLength='9'
          style="width: 5%"/>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-col :span="11">
           
            <el-date-picker
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions1"
              v-model="form.startTime"
              style="width: 50%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item class="a">
          <el-button type="primary" @click="onSubmit">立即发布</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-col> 
  </el-row>
  <div>
   <researchTemplate></researchTemplate>
      </div>
  </div>
</template>



<style>
.el-header,
.el-footer {
  line-height: 200px;
}
.el-main {
  text-align: center;
  line-height: 600px;
}
.el-button {
  height: 20px;
  width: 100px;
  font-size: 10px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 800px;
}
.el-container {
  height: 760px;
  margin-bottom: 40px;
}
</style>
<script>
import researchTemplate from '@/views/research/researchTemplates.vue'
import {addDemand} from '@/api/demand'
import {findAlls} from '@/api/dept'
export default {
  
  data() {
    return {
      detp:[
        {
            "deptId": '',
            "deptName": ""
        },
      ],//部门集合
      form: {
        demandTitle: "",
        demandInstructions:"",
        region: "",
        startTime: "",
        endTime: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        trainingMethods:"",
        peopleNumber: "",
        demandReason: "",
        demandDept: "",
      },
      
    };
  },
  components: {
    researchTemplate,
  },
  methods: {
    onSubmit() {
      addDemand(this.form).
      then(res => {
       if (res.code==200) {
                this.$message({
                  type: 'success',
                  message: '发布成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.data.message
                })
              }
      }).catch();
      console.log("submit!");
    },
    selectChange(){
      // alert("1")
      findAlls().then(res =>{
       console.log(res)
       this.detp=res.data;
      }
      ).catch()
    }
  },
  created () {
   this.selectChange()
  }
};
</script>
